<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px">
            <el-form-item label="流程名称" prop="name">
                <el-input
                        v-model="queryParams.name"
                        placeholder="请输入流程定义名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="流程KEY" prop="key">
                <el-input
                        v-model="queryParams.key"
                        placeholder="请输入流程唯一标识KEY"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="processDefinitionList">
            <el-table-column label="序号" align="center" type="index" width="70"/>
            <el-table-column label="流程ID" align="center" prop="id" :show-overflow-tooltip="true"/>
            <el-table-column label="流程名称" align="center" prop="name" :show-overflow-tooltip="true"/>
            <el-table-column label="流程KEY" align="center" prop="key" :show-overflow-tooltip="true"/>
            <el-table-column label="流程版本" align="center" prop="version" :show-overflow-tooltip="true"/>
            <el-table-column label="流程描述" align="center" prop="description" :show-overflow-tooltip="true"/>
            <el-table-column label="部署时间" align="center" prop="deploymentTime" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleApprovalUser(scope.row)"
                            v-hasPermi="['store:modifyStore']"
                    >设置审批人
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {listDefinition} from "@/api/system/processUser.js";

    export default {
        name: "listDefinition",
        components: {},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 申请单表格数据
                processDefinitionList: [],
                // 查询参数
                queryParams: {
                    name: undefined,
                    key: undefined,
                },
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询仓库列表 */
            getList() {
                this.loading = true;
                listDefinition(this.queryParams).then(response => {
                    this.processDefinitionList = response.data;
                    this.loading = false;
                });
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.getList();
            },
            handleApprovalUser(row){
                //跳转到新增页面
                var processDefinition = {
                    id: row.id,
                    name: row.name,
                    key: row.key,
                    deploymentId: row.deploymentId,
                    deploymentTime: row.deploymentTime,
                    version: row.version,
                    description: row.description
                }
                this.$router.push({path: "/system/definitionUser",query:processDefinition});
            }
        }
    };
</script>





